<template>
	<div class="me-nav">
		<div class="nav-item flex" :class="resumeObj.resumeInfos && resumeObj.resumeInfos.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/layer-no.png" class="no-fill">
				<img src="@/assets/me/layer.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				基本资料
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<div class="nav-item flex" :class="resumeObj.resumeIntentions && resumeObj.resumeIntentions.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/target-no.png" class="no-fill">
				<img src="@/assets/me/target.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				求职意向
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<div class="nav-item flex" :class="resumeObj.resumeSelfDescs && resumeObj.resumeSelfDescs.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/comment-no.png" class="no-fill">
				<img src="@/assets/me/comment.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				自我描述
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<div class="nav-item flex" :class="resumeObj.resumeEducations && resumeObj.resumeEducations.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/education-no.png" class="no-fill">
				<img src="@/assets/me/education.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				教育经历
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<div class="nav-item flex" :class="resumeObj.resumeWorks && resumeObj.resumeWorks.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/job-no.png" class="no-fill">
				<img src="@/assets/me/job.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				工作经历
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<div class="nav-item flex" :class="resumeObj.resumeTrains && resumeObj.resumeTrains.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/major-no.png" class="no-fill">
				<img src="@/assets/me/major.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				培训经历
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<div class="nav-item flex" :class="resumeObj.resumeCertificates && resumeObj.resumeCertificates.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/certificate-no.png" class="no-fill">
				<img src="@/assets/me/certificate.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				获得证书
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<div class="nav-item flex" :class="resumeObj.resumeLanguages && resumeObj.resumeLanguages.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/voice-no.png" class="no-fill">
				<img src="@/assets/me/voice.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				语言能力
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<div class="nav-item flex" :class="resumeObj.resumeSpecialtyTags && resumeObj.resumeSpecialtyTags.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/authority-no.png" class="no-fill">
				<img src="@/assets/me/authority.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				特长标签
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<div class="nav-item flex" :class="resumeObj.resumeProducts && resumeObj.resumeProducts.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/works-no.png" class="no-fill">
				<img src="@/assets/me/works.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				照片/作品
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div>
		<!-- <div class="nav-item flex" :class="resumeObj.resumeAttachments && resumeObj.resumeAttachments.length>0?'is-filled':''">
			<div class="nav-icon">
				<img src="@/assets/me/enclosure-no.png" class="no-fill">
				<img src="@/assets/me/enclosure.png" class="filled">
			</div>
			<div class="nav-text flex-item">
				附件简历
			</div>
			<div class="filled-icon">
				<img src="@/assets/me/complete-no.png" class="no-fill">
				<img src="@/assets/me/complete.png" class="filled">
			</div>
		</div> -->
		<div class="preview-btn" @click="goToPreview">
			<img src="@/assets/me/eye.png"><span>预览简历</span>
		</div>
		<div class="reload-btn" @click="reloadResume">
			<img src="@/assets/me/reload.png"><span>刷新简历</span>
		</div>
		<div class="preview-btn" @click="$router.push('/account/myResume')">简历列表</div>
		<div class="default-resume">
			<el-switch v-model="defaultSwitch" inactive-text="设为默认简历" active-color="#3EABC4" inactive-color="#ccc" @change="setDefault"></el-switch>
		</div>
	</div>
</template>
<script>
import {updateDefaultResume,setDefaultResume} from '@/api/me/resume'
	export default {
		name:'me-nav',
		props:['resumeData'],
		data: function() {
			return {
				id:this.$route.query.id,
				defaultSwitch:false,
				resumeObj:this.resumeData,
				defaultResume: 0,
			}
		},
		watch:{
			resumeData(val){
				this.resumeObj=val
				if(val.defaultResume == 0){
					this.defaultSwitch = true
				}else{
					this.defaultSwitch = false
				}
			}
		},
		created() {


		},
		methods: {
			goToPreview(){
				this.$router.push({ path:"/resumePreview" ,query:{id:this.id}});
			},
			reloadResume(){
				let data={
					resumeId:this.id
				}
				updateDefaultResume(data).then(res => {
					this.$message.success('刷新成功');
				}).catch(err => {
					this.$message.error(err);
				})
			},
			setDefault(val){
				let data={ id:this.id }
				setDefaultResume(data).then(res => {
					this.$message.success(res.resp_msg);
				}).catch(err => {
					this.$message.error(err);
				})
			}
		}
	}
</script>
<style lang="scss">
	.me-nav{
		background-color: #fff;
		padding: 10px 0px;
		.nav-item{
			height: 40px;
			line-height: 40px;
			align-items: center;
			cursor: pointer;
			.nav-icon{
				width: 20px;
				height: 20px;
				margin-left: 23px;
				img{
					display: block;
					width: 100%;
					height: 100%;
				}
				.filled{
					display: none;
				}
			}
			.nav-text{
				margin-left: 10px;
				color: #666;
			}
			.filled-icon{
				width: 12px;
				height: 12px;
				margin-right: 30px;
				img{
					display: block;
					width: 100%;
					height: 100%;
				}
				.filled{
					display: none;
				}
			}
		}
		.nav-item.is-filled{
			.filled{
				display: block;
			}
			.no-fill{
				display: none;
			}
			.nav-text{
				color: #3EABC4;
			}
		}
		.nav-item:hover{

		}
		.preview-btn{
			width: 170px;
			height: 40px;
			line-height: 40px;
			background: #3EACC4;
			border-radius: 4px;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;
			color: #fff;
			cursor: pointer;
			img{
				margin-right: 5px;
				vertical-align: middle;
				margin-top: -2px;
			}
		}
		.reload-btn{
			width: 170px;
			height: 40px;
			line-height: 40px;
			border-radius: 4px;
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			margin-top: 10px;
			color:#3EACC4;
			border:1px solid #3EACC4;
			cursor: pointer;
			img{
				margin-right: 5px;
				vertical-align: middle;
				margin-top: -2px;
			}
		}
		.default-resume{
			text-align: center;
			.el-switch__label{
				color: #3EABC4 !important;
			}
			margin-top: 40px;
			padding-bottom: 60px;
			.el-switch__core{
				width: 28px !important;
				height: 17px;
			}
			.el-switch__core:after {
				width: 13px;
				height: 13px;
			}
			.el-switch.is-checked .el-switch__core::after {
				left: 100%;
				margin-left: -14px;
			}
		}
	}
</style>
